<template>
	<view>
		<view class="head_main_con" :style="{backgroundColor: headBg,paddingTop: sysInfo.top * 2 + 'rpx',}">
			<view class="head_main border-box flex-between" :style="{backgroundColor: headBg,}">
				<view class="flex-center" @click="onGoBack" v-if="showBack">
					<u-icon name="arrow-left" size="24"></u-icon>
					<slot name="head_left"></slot>
				</view>
				<view class="title" v-if="showTitle">
					{{ title }}
				</view>
				<view class="flex-center" v-if="showHeadRight">
					<slot name="head_right"></slot>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			headBg: {
				type: String,
				default: "#fff"
			},
			title: {
				type: String,
				default: ""
			},
			showBack: {
				type: Boolean,
				default: true
			},
			showHeadRight: {
				type: Boolean,
				default: false
			},
			showTitle: {
				type: Boolean,
				default: true
			},
		},

		data() {
			return {
				sysInfo: {},
			}
		},
		created() {
			this.sysInfo = this.$common.mySysInfo();
		},
		methods: {
			onGoBack() {
				this.$common.goBack();
			},
		},
	}
</script>

<style scoped lang="scss">
	.head_main_con {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0, ;
		z-index: 10;
		

		.head_main {
			width: 100%;
			height: 88rpx;
			padding: 0 30rpx;
			position: relative;

			.title {
				color: #{$footColor};
				font-size: 32rpx;
				position: absolute;
				z-index: 1;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				font-weight: bold;
			}
		}
	}
</style>